const data = {
  name: "张三",
  age: 20,
};

// proxy可以监听所有的数据的变化，包括对象和数组
// 不会出现响应式的问题

// proxy只有两个参数
// 可以直接监听整个对象
const proxy = new Proxy(data, {
  // get有三个参数，依次为目标对象、属性名和 proxy 实例本身
  get(target, propKey, receiver) {
    if (propKey in target) {
      return target[propKey];
    } else {
      // throw new ReferenceError('Prop name "' + propKey + '" does not exist.');
      return "没有" + propKey + "属性";
    }
  },
  // set可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。
  set(target, propKey, propValue) {
    target[propKey] = propValue;
    // 可以去重新渲染页面了
  },
});

console.log(proxy.name);
console.log(proxy.age);
console.log(proxy.sex);

proxy.name = "lisi";
console.log(proxy.name);
